<template>
  <NtdModal
    ref="ntdModal"
    :title="`节点[${nodeData.id}]配置`"
  >
    <a-form
      :model="formData"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 19 }"
      autocomplete="off"
      @finish="submit"
    >
      <template v-if="nodeData.customerType === 0">
        <a-form-item
          label="节点名称"
          name="name"
          :rules="rules"
        >
          <a-input v-model:value="formData.username" />
        </a-form-item>
        <a-form-item
          label="节点类型"
          name="startType"
          :rules="rules"
        >
          <a-select
            v-model:value="formData.startType"
            placeholder="请选择节点类型"
          >
            <a-select-option value="wait">
              等待节点
            </a-select-option>
            <a-select-option value="cron">
              定时任务节点
            </a-select-option>
            <a-select-option value="server">
              服务节点
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="formData.startType === 'server'"
          label="服务应用选择"
          name="serverAppId"
          :rules="rules"
        >
          <a-select
            v-model:value="formData.serverAppId"
            placeholder="请选择服务应用"
          >
            <a-select-option
              v-for="app in serverAppDict"
              :key="app.val"
              :value="app.val"
            >
              {{ app.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </template>
      <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
        <a-button
          type="primary"
          html-type="submit"
        >
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </NtdModal>
</template>

<script setup>
import {defineExpose, defineProps, onMounted, ref, onBeforeMount, reactive} from "vue";
import NtdModal from "@/components/ntd-ant-modal/NtdModal";
import UtilAxios from '@/util/util-axios'

const props = defineProps({
  nodeData: {
    type: Object,
    required: true
  }
})

const ntdModal = ref()
let formData = ref({})
const rules = [{ required: true, message: '请输入该选项' }]

let serverAppDict = reactive([])

onBeforeMount(async () => {
  let res = await UtilAxios.buildDict('function', 'server-app')
  serverAppDict.push(...res)
});

const open = () => {
  ntdModal.value.open()
}

defineExpose({open})

const submit = () => {

}

</script>

<style scoped>

</style>